<template>
  <div class="amap-page-container">
    <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
    </el-amap>
     <span v-if="loaded">
        location: lng = {{ lng }} lat = {{ lat }}
      </span>
    <span v-else>正在定位</span>
    <!-- 搜索框 -->
    <!-- <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    ></el-amap-search-box> -->
    <!-- <el-amap
      ref="map"
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      class="amap-demo"
    > -->
      <!-- 在地图上标记点 -->
      <!-- <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker"></el-amap-marker> -->
      <!-- 坐标点 -->
      <!-- <el-amap-marker vid="amapDemo" :position="center"></el-amap-marker> -->
      <!-- 当前所在位置的窗口 -->
      <!-- <el-amap-info-window
        :position="currentWindow.position"
        :content="currentWindow.content"
        :visible="currentWindow.visible"
        :events="currentWindow.events"
      ></el-amap-info-window> -->
      <!-- 放置图片 -->
      <!-- 好像没用 -->
      <!-- <el-amap-ground-image
        v-for="(groundimage,index) in groundimages"
        :url="groundimage.url"
        :key="index"
        :bounds="groundimage.bounds"
        :events="groundimage.events"
      ></el-amap-ground-image> -->
      <!-- 文字 -->
      <!-- <el-amap-text
        v-for="(text,index) in texts"
        :text="text.text"
        :key="index"
        :offset="text.offset"
        :position="text.position"
        :events="text.events"
      ></el-amap-text> -->
      <!-- <el-amap-text
        v-for="(text,index) in texts2"
        :text="text.text"
        :key="index"
        :offset="text.offset"
        :position="text.position"
        :events="text.events"
      ></el-amap-text> -->
      <!-- <el-amap-text
        v-for="(text,index) in texts3"
        :text="text.text"
        :key="index"
        :offset="text.offset"
        :position="text.position"
        :events="text.events"
      ></el-amap-text> -->
    <!-- </el-amap> -->
    <!-- 点击地图的按钮 -->
    <!-- <div class="toolbar">
      <button @click="getMap()">获取地图信息</button>
      <button @click="switchWindow(0)">展示第一个位置</button>
      <button @click="switchWindow(1)">展示第二个位置</button>
    </div> -->
  </div>
</template>
<script>
// import Vue from "vue";
// import VueAMap from "vue-amap";
// Vue.use(VueAMap);

// let amapManager = new VueAMap.AMapManager();
export default {
  name: "Gaode",
  created() {},
  mounted() {
    this.currentWindow = this.windows[1]; // 初始化窗口信息
  },
  data: function() {
    let me = this;
    me.city = me.city || "上海";
    return {
      zoom: 12,
      center: [121.59996, 31.197646], // 中心位置
      makerConf: {
        position: [121.59996, 31.197646],
        content: ""
      },
    //   amapManager,
      // events: {
      //   init: o => {
      //     // 将当前位置标记为A
      //   //   AMapUI.loadUI(["overlay/SimpleMarker"], function(SimpleMarker) {
      //   //     const marker = new SimpleMarker({
      //   //       iconLabel: "A",
      //   //       iconStyle: "red",
      //   //       map: o,
      //   //       position: o.getCenter()
      //   //     });
      //   //   });
      //     console.log("当前位置的坐标", o.getCenter());
      //     console.log("方法", this.$refs.map.$$getInstance());
      //     o.getCity(result => {
      //       console.log(result);
      //     });
      //   },
      //   moveend: () => {},
      //   zoomchange: () => {},
      //   //单击地图事件
      //   click: e => {
      //     console.log(e);
      //     this.center = [e.lnglat.lng, e.lnglat.lat]; // 点击选择新地址为中心点
      //     const msg = {
      //       key: "4f3e46ab2605a1afcf814571be38688d",
      //       location: this.center.join()
      //     };
      //     // 获取当前地址
      //     console.log(this, "this");
      //     this.$$.ajax({
      //       url: "https://restapi.amap.com/v3/geocode/regeo",
      //       data: msg,
      //       success: data => {
      //         console.log(data);
      //         let d = data.regeocode;
      //         if (d) {
      //           this.address = d.formatted_address; // 点击选择新地址并获取地址的名称
      //         }
      //       }
      //     });
      //   }
      // },
      markers: [
        [121.49996, 31.297646],
        [121.40018, 31.197622],
        [121.49991, 31.207649]
      ],
      searchOption: {
        city: "乌鲁木齐",
        citylimit: false
      },
      mapCenter: [121.40996, 31.197646],
      // ToolBar工具条插件、MapType插件、Scale比例尺插件、OverView鹰眼插件
      plugin: [
        "ToolBar",
        {
          pName: "Geolocation",
          events: {
            inti(o) {
             console.log("o自动定位", o);
             o.getCityInfo((status, result) => {
                console.log("result定位城市", result)
             })
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  console.log("result", result);
                  self.lng = result.position.lng; //设置经度
                  self.lat = result.position.lat; //设置维度
                  self.center = [self.lng, self.lat]; //设置坐标
                //   self.loaded = true; //load
                  self.$nextTick(); //页面渲染好后
                }
              });
            }
          }
        },
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            }
          }
        },
        {
          pName: "Scale",
          events: {
            init(instance) {
              console.log(instance);
            }
          }
        },
        {
          pName: "OverView",
          events: {
            init(instance) {
              console.log(instance);
            }
          }
        }
      ],
      windows: [
        // 窗口信息框
        {
          position: [121.69996, 31.237646],
          content: `<img style="width:50px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543494665847&di=152e6f241b64580684a1c048ec9acd7e&imgtype=0&src=http%3A%2F%2Fp0.so.qhmsg.com%2Ft017668631465b251d5.gif"><p style="color:red">Hi！  马优晨，我在这里呢 ！</p>`,
          visible: true,
          events: {
            close() {
              console.log("关闭窗口一！");
            }
          }
        },
        {
          position: [121.5875285, 31.21515044],
          content:
            '<img style="width:50px;" src="https://b305.photo.store.qq.com/psb?/V12aHQSq1CQ6SF/jfM4Tyeelt4v09alIPSOBkDqUCRgwqCHQKMs5iV4x3A!/b/dDEBAAAAAAAA&bo=wAMABQAAAAARB*Y!&rf=viewer_4"><p style="color:red">我在国际博览中心！</p>',
          visible: true,
          events: {
            close() {
              console.log("关闭窗口二！");
            }
          }
        }
      ],
      // 放置图片
      groundimages: [
        {
          url:
            "https://imedl.sogoucdn.com/cache/skins/uploadImage/2018/11/12/15420362056827_former.gif",
          bounds: [[121.5273285, 31.21515044], [122.9273285, 32.31515044]],
          events: {
            click() {
              alert("click groundimage");
            }
          }
        }
      ],
      // 放置文字
      texts: [
        {
          position: [121.5273285, 31.27515044],
          text: `<img style="width:50px;" src="http://imgsa.baidu.com/exp/w=500/sign=ce843cf58282b9013dadc333438ca97e/10dfa9ec8a13632763a8d5e1998fa0ec09fac79e.jpg"><p>探索宝藏的第一个线索！</p>`,
          offset: [0, 0],
          events: {
            click: () => {
              alert("click text");
            }
          }
        }
      ],
      // 放置文字
      texts2: [
        {
          position: [121.6873285, 31.19515044],
          text:
            '<img style="width:50px;" src="http://cdn.duitang.com/uploads/item/201501/10/20150110172950_aenAB.thumb.700_0.gif"><p>探索宝藏的第二个线索！</p>',
          offset: [0, 0],
          events: {
            click: () => {
              alert("click text");
            }
          }
        }
      ],
      // 放置文字
      texts3: [
        {
          position: [121.6873285, 31.29515044],
          text:
            '<img style="width:50px;" src="http://b-ssl.duitang.com/uploads/item/201710/05/20171005143631_5yZeJ.gif"><p>探索宝藏的第三个线索！</p>',
          offset: [0, 0],
          events: {
            click: () => {
              alert("click text");
            }
          }
        }
      ],
      slotWindow: {
        position: [121.5163285, 31.21515044]
      },
      // 当前窗口
      currentWindow: {
        position: [0, 0],
        content: "",
        events: {},
        visible: false
      },
      // 个人定义的地址
      address: ""
    };
  },
  methods: {
    getMap() {
      console.log(amapManager._componentMap);
      console.log(amapManager._map);
    },
    // 切换信息窗口
    switchWindow(tab) {
      this.currentWindow.visible = false;
      this.$nextTick(() => {
        this.currentWindow = this.windows[tab];
        this.currentWindow.visible = true;
      });
    },
    // 在地图上添加标记的点
    addMarker: function() {
      let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
      let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
      this.markers.push([lng, lat]);
    },
    // 搜索框输入
    onSearchResult(pois) {
      console.log(pois, "123456789");
      let me = this;
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        var poi = pois[0];
        let lng = poi["lng"];
        let lat = poi["lat"];
        me.center = [lng, lat];
        me.makerConf.position = [lng, lat];
        me.list = pois;
        pois.forEach(poi => {
          let { lng, lat } = poi;
          lngSum += lng;
          latSum += lat;
          this.markers.push([poi.lng, poi.lat]);
        });
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        };
        this.mapCenter = [center.lng, center.lat];
      }
    }
  }
};
</script>

<style scoped>
.amap-demo {
  height: 1200px;
}
.search-box {
  position: absolute;
  top: 25px;
  left: 70px;
}
.amap-page-container {
  position: relative;
}
.toolbar button {
  background: #42b983;
  border: 0;
  color: white;
  padding: 8px;
  margin: 0 5px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 10px;
}
</style>
